<script setup>
import { ref } from "vue";

const currentYear = ref(new Date().getFullYear());
</script>

<template>
  <div class="footer animate__animated animate__fadeInUp">
    <div>Copyright &copy; 2022-{{ currentYear }} DuCheng</div>
    <div style="display: flex; align-items: center">
      <a
        style="margin-right: 10px"
        href="https://beian.miit.gov.cn/#/Integrated/index"
        >浙ICP备2022032081号</a
      >
      <a
        style="display: flex; align-items: center"
        target="_blank"
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33060202001281"
      >
        <img src="@/assets/images/bei-an.png" />浙公网安备 33060202001281号
      </a>
    </div>
    <a
      href="https://unsplash.com/photos/H_BJWThZRok?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink"
    >
      背景图片来源于unsplash
    </a>
  </div>
</template>

<style scoped lang="scss">
// footer
.footer {
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;

  a {
    color: white;
    margin-top: 0.4rem;
    text-decoration: none;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2px;
      width: 100%;
      height: 2px;
      background-color: #4aa299;
      transform-origin: center;
      transform: translate(-50%, 0) scaleX(0);
      transition: transform 0.3s ease-in-out;
    }

    &:hover::before {
      transform: translate(-50%, 0) scaleX(1);
    }
  }
}
</style>
